<template>
  <div>
     <van-icon
        @click="onClickLeft()"
        size="20"
        color="black"
        name="arrow-left"
        class="icon_arrow"
      />
    <div class="background">
    <p class="p1">手机短信登录</p>
    <p class="p2">未注册手机号验证后会直接注册为whole账号</p>
    <van-form class="form_login" @submit="onSubmit">
      <van-field
        v-model="user_tel"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请输入手机号码' }]"
      />
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button
            size="small"
            :disabled="disabled"
            round
            :type="type"
            @click="getSend()"
            >{{ con }}</van-button
          >
        </template>
      </van-field>
      <br>
      <br><br>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
        >
          登录
        </van-button>
        <br>
        <p></p>
        <p class="p3" @click="dologin()">使用已有whole账号登录</p>
      </div>
    </van-form>
    </div>
  </div>
</template>

<script>
import http from '../api/index';

export default {
  data() {
    return {
      user_tel: '',
      sms: '',
      type: 'info',
      disabled: false,
      show: false,
      con: '发送验证码',
      time: '',
    };
  },
  methods: {
    onClickLeft(){
      this.$router.push('/mine');

    },
    onSubmit(values) {
      console.log('submit', values);
      console.log(this.sms);
      http
        .userRegister({
          phone: this.user_tel,
          code: this.sms,
        })
        .then((r) => {
          console.log('login==', r);
          if (r.code === 200) {
            this.$message({
              message: '登录成功',
              type: 'success',
            });
            sessionStorage.setItem('username', r.data[0].user_name);
            sessionStorage.setItem('roleId', r.data[0].user_id);
            sessionStorage.setItem('src', r.data[0].user_image_road);
            this.$router.push('/mine');
          } else if (r.code === 205) {
            this.$message({
              message: '验证码已过期',
              type: 'warning',
            });
          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
            });
          }
        });
    },
    dologin() {
      this.$router.push('/login');
    },
    getSend() {
      console.log(this.user_tel);
      
      this.disabled = true;
      http
        .getSend({
          phone: this.user_tel,
        })
        .then((r) => {
          console.log(r);
        });
      let num = 60;
      this.time = setInterval(() => {
        num--;
        this.type = 'default';
        this.con = '重新发送（' + num + ')';
        if (num < 0) {
          // 清除定时器
          clearInterval(this.time);
          // 使按钮释放
          this.disabled = false;
          this.type = 'info';

          // 让按钮内容变为 '免费获取验证码'
          this.con = '获取验证码';
          // 让num=10;
          num = 10;
        }
      }, 1000);
    },
    login() {
      console.log(this.user_tel);
      console.log(this.sms);
    //   http
    //     .userRegister({
    //       phone: this.user_tel,
    //       code: this.sms,
    //     })
    //     .then((r) => {
    //       console.log('login==', r);
    //       if (r.code === 200) {
    //         this.$message({
    //           message: '登录成功',
    //           type: 'success',
    //         });
    //         this.$router.push('/mine');
    //       } else if (r.code === 205) {
    //         this.$message({
    //           message: '验证码已过期',
    //           type: 'warning',
    //         });
    //       } else {
    //         this.$message({
    //           message: '验证失败',
    //           type: 'error',
    //         });
    //       }
    //     });
    },
  },
};
</script>
<style scoped>
.p1 {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-top: 3rem;
}
.p2 {
  margin-top: 1rem;
  font-size: 1.3rem;
  text-align: center;
  color: rgb(78, 77, 77);
}
.p3 {
  color: #1989fa;
  text-align: center;
}
.form_login{
  margin-top: 1.5rem;
}
.login_button{
  margin-top: 0px;
}
.background{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
}
.icon_arrow{
  position: absolute;
  left: 0.4rem;
  top: 0.7rem;
}
</style>